<template>
  <div class="goods-detail-container" element-loading-text="努力加载中，请稍等" v-loading="listLoading">
    <el-row :gutter="20" class="goodsDetail-row">
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <el-form
          ref="goodsDetail"
          :model="goodsDetail"
          :rules="rules"
          label-width="100px"
          class="goodsDetail-form"
        >
          <el-form-item label="商品Logo" prop="goodsLogo">
            <img :src="goodsDetail.goodsLogo" class="goods-detail-image" />
            <el-upload
              class="upload-logo"
              :action="'/goods/info/uploadGoodsImage?fileName=' + goodsDetail.goodsName + '-logo-'"
              :headers="headers"
              :before-upload="beforeImageUpload"
              :on-progress="uploadImageLoading"
              :show-file-list="false"
              :on-success="handleLogoSuccess">
              <el-button size="small" type="primary">点击上传Logo</el-button>
              <div slot="tip" class="el-upload__tip">只能上传一个jpg/png/jpeg文件</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="商品名称" prop="goodsName">
            <el-input v-model="goodsDetail.goodsName" size="medium"></el-input>
          </el-form-item>
          <el-form-item label="展示价格" prop="goodsPrice">
            <el-input type="number" @input.native="priceInput($event,goodsDetail.goodsPrice)" v-model="goodsDetail.goodsPrice" size="medium" :value="goodsDetail.goodsPrice"></el-input>
          </el-form-item>
          <el-form-item label="邮费类型" prop="postageType">
            <el-select v-model="goodsDetail.postageType">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否上架" prop="isSell">
            <el-switch 
              v-model="goodsDetail.isSell"
              @change='changeSell($event)' 
              :active-value="1" 
              :inactive-value="0">
            </el-switch>
          </el-form-item>
          <el-form-item label="商品类型" prop="goodsType" class="goods-type">
            <el-tabs type="border-card" class="goods-type-tabs">
              <el-tab-pane v-if="goodsDetail.goodsType.type" label="类型">
                <el-row :gutter="20" class="goods-type-row">
                  <el-col v-for="(item, index) in goodsDetail.goodsType.type" :key="index" :xs="24" :sm="8" :md="8" :lg="8" :xl="6">
                    <el-card :body-style="{ padding: '0px' }">
                      <el-tooltip effect="dark" content="点击编辑" placement="top">
                        <img :src="item.image" class="goods-type-image" @click="typeDialogVisible = true">
                      </el-tooltip>
                      <div style="padding: 14px; text-align: center; white-space: nowrap; overflow:hidden; text-overflow:ellipsis;">                   
                        <span>{{item.type}}</span>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane v-if="goodsDetail.goodsType.color" label="颜色">
                <el-row :gutter="20" class="goods-type-row">
                  <el-col v-for="(item, index) in goodsDetail.goodsType.color" :key="index" :xs="24" :sm="8" :md="8" :lg="8" :xl="6">
                    <el-card :body-style="{ padding: '0px' }">
                      <el-tooltip effect="dark" content="点击编辑" placement="top">
                        <img :src="item.image" class="goods-type-image" @click="colorDialogVisible = true">
                      </el-tooltip>
                      <div style="padding: 14px; text-align: center; white-space: nowrap; overflow:hidden; text-overflow:ellipsis;">                   
                        <span>{{item.color}}</span>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane v-if="goodsDetail.goodsType.size" label="尺寸">
                <el-row :gutter="20" class="goods-type-row">
                  <el-col v-for="(item, index) in goodsDetail.goodsType.size" :key="index" :xs="24" :sm="8" :md="8" :lg="6" :xl="6">
                    <el-tooltip effect="dark" content="点击编辑" placement="top">
                      <div class="input-item">         
                        <el-input v-model="goodsDetail.goodsType.size[index]"></el-input>
                        <i class="icon-delete el-icon-error" @click="removeSize(index)"></i>
                      </div>
                    </el-tooltip>
                  </el-col>
                  <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="6">
                    <el-input v-if="goodsDetail.goodsType.size[goodsDetail.goodsType.size.length]" v-model="goodsDetail.goodsType.size[goodsDetail.goodsType.size.length]"></el-input>
                    <el-button @click="addSize()" size="mini" class="el-icon-plus" circle style="margin:17px 0 0 12px;"></el-button>
                  </el-col>  
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
          <el-form-item label="商品详情图" prop="goodsContent" class="goods-content">
            <el-tooltip effect="dark" content="点击编辑" placement="right">
              <div class="goods-content-box">
                <el-scrollbar class="goods-content-scrollbar">
                  <img v-for="url in goodsDetail.goodsContent" :key="url" :src="url" @click="contentDialogVisible = true" class="goods-content-image">
                </el-scrollbar>
              </div>
            </el-tooltip>
          </el-form-item> 
          <el-form-item label="商品轮播图" prop="pics" class="goods-pics">
            <el-tooltip effect="dark" content="点击编辑" placement="right">
              <el-carousel height="500px" indicator-position="outside" class="goods-pics-carousel">
                <el-carousel-item v-for="item in goodsDetail.pics" :key="item">
                  <img :src="item.picSrc" class="goods-pics-image" @click="picsDialogVisible = true">
                </el-carousel-item>
              </el-carousel>
            </el-tooltip>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('goodsDetail')">
              更改商品信息
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-dialog title="修改商品详情" 
      :before-close="contentClose" 
      :visible.sync="contentDialogVisible" 
      v-loading="dialogLoading"
      element-loading-text="努力上传中，请稍等">
      <el-scrollbar class="goods-type-scrollbar">
        <el-form
            ref="content"
            :model="goodsDetailTemp.goodsContent"
            label-width="100px"
            class="content-form"
        >
          <div v-for="(item, index) in goodsDetailTemp.goodsContent" :key="index">
            <el-form-item prop="image">
              <el-row :gutter="10" class="goods-type-row">
                <el-col span="12">
                  <el-upload
                    class="upload-logo"
                    :headers="headers"
                    list-type="picture"
                    :on-progress="uploadTypeLoading"
                    :before-upload="beforeImageUpload"
                    :action="'/goods/info/uploadGoodsImage?fileName=' + goodsDetailTemp.goodsName + '-content-'"
                    :on-success="((file,fileList)=>{return handleContentSuccess(file,fileList,index)})"
                    :show-file-list="false"
                    >
                    <el-tooltip effect="dark" content="点击上传" placement="right">
                      <img :src="item" width="300px">
                    </el-tooltip>
                    <div slot="tip" class="el-upload__tip">点击图片可重新上传一张jpg/png/jpeg图片, 图片大小不超过2M</div>
                  </el-upload>
                </el-col>
                <el-col span="3">
                  <el-button @click="removeContent(index)">删除</el-button>
                </el-col>
                <el-col span="3">
                  <el-button v-if="index!=0" @click="upItem(index, goodsDetailTemp.goodsContent)">上移</el-button>
                </el-col>
                <el-col span="3">
                  <el-button v-if="index!=goodsDetailTemp.goodsContent.length-1" @click="downItem(index, goodsDetailTemp.goodsContent)">下移</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-divider></el-divider>
          </div>
          <el-form-item v-if="goodsDetailTemp.goodsContent.length < 20">
            <el-upload
              class="upload-logo"
              :headers="headers"
              :on-progress="uploadTypeLoading"
              :before-upload="beforeImageUpload"
              :action="'/goods/info/uploadGoodsImage?fileName=' + goodsDetailTemp.goodsName + '-content'"
              :on-success="((file,fileList)=>{return handleContentSuccess(file,fileList,goodsDetailTemp.goodsContent.length)})"
              :show-file-list="false"
              >
              <el-button size="small" type="primary">点击上传图片</el-button>
              <img v-if="goodsDetailTemp.goodsContent[goodsDetailTemp.goodsContent.length]" :src="goodsDetailTemp.goodsContent[goodsDetailTemp.goodsContent.length]" class="avatar">
              <div slot="tip" class="el-upload__tip">点击上传一个jpg/png/jpeg文件, 上传的图片最多不超过20张, 每张不超过2M</div>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <div slot="footer" style="text-align: center;" class="dialog-footer">
        <el-button @click="contentClose">取 消</el-button>
        <el-button type="primary" @click="updateContent">确 定</el-button>
      </div>   
    </el-dialog>
    <el-dialog title="修改商品轮播图" 
      :before-close="picsClose" 
      :visible.sync="picsDialogVisible" 
      v-loading="dialogLoading"
      element-loading-text="努力上传中，请稍等">
      <el-scrollbar class="goods-type-scrollbar">
        <el-form
            ref="pics"
            :model="goodsDetailTemp.pics"
            label-width="100px"
            class="pics-form"
        >
          <div v-for="(item, index) in goodsDetailTemp.pics" :key="index">
            <el-form-item prop="pics">
              <el-row :gutter="10" class="goods-type-row">
                <el-col span="12">
                  <el-upload
                    class="upload-logo"
                    :headers="headers"
                    list-type="picture"
                    :on-progress="uploadTypeLoading"
                    :before-upload="beforeImageUpload"
                    :action="'/goods/info/uploadGoodsImage?fileName=' + goodsDetailTemp.goodsName + '-pics-'"
                    :on-success="((file,fileList)=>{return handlePicsSuccess(file,fileList,index)})"
                    :show-file-list="false"
                    >
                    <el-tooltip effect="dark" content="点击上传" placement="right">
                      <img :src="item.picSrc" width="300px">
                    </el-tooltip>
                    <div slot="tip" class="el-upload__tip">点击图片可重新上传一张jpg/png/jpeg图片, 图片大小不超过2M</div>
                  </el-upload>
                </el-col>
                <el-col span="3">
                  <el-button @click="removePics(index)">删除</el-button>
                </el-col>
                <el-col span="3">
                  <el-button v-if="index!=0" @click="upItem(index, goodsDetailTemp.pics)">上移</el-button>
                </el-col>
                <el-col span="3">
                  <el-button v-if="index!=goodsDetailTemp.pics.length-1" @click="downItem(index, goodsDetailTemp.pics)">下移</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-divider></el-divider>
          </div>
          <el-form-item v-if="goodsDetailTemp.pics.length < 7">
            <el-upload
              class="upload-logo"
              :headers="headers"
              :on-progress="uploadTypeLoading"
              :before-upload="beforeImageUpload"
              :action="'/goods/info/uploadGoodsImage?fileName=' + goodsDetailTemp.goodsName + '-pics-'"
              :on-success="((file,fileList)=>{return handleNewPicsSuccess(file,fileList,goodsDetailTemp.pics.length)})"
              :show-file-list="false"
              >
              <el-button size="small" type="primary">点击上传图片</el-button>
              <img v-if="goodsDetailTemp.pics[goodsDetailTemp.pics.length]" :src="goodsDetailTemp.pics[goodsDetailTemp.pics.length].picSrc" class="avatar">
              <div slot="tip" class="el-upload__tip">点击上传一个jpg/png/jpeg文件, 上传的图片最多不超过7张, 每张不超过2M</div>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <div slot="footer" style="text-align: center;" class="dialog-footer">
        <el-button @click="picsClose">取 消</el-button>
        <el-button type="primary" @click="updatePics">确 定</el-button>
      </div>   
    </el-dialog>
    <el-dialog title="修改商品类型信息" 
      :before-close="typeClose" 
      :visible.sync="typeDialogVisible" 
      v-loading="dialogLoading"
      element-loading-text="努力上传中，请稍等">
      <el-scrollbar class="goods-type-scrollbar">
        <el-form
            ref="type"
            :model="goodsDetailTemp.goodsType.type"
            label-width="100px"
            class="goodsType-form"
        >
          <div v-for="(item, index) in goodsDetailTemp.goodsType.type" :key="index">
            <el-form-item label="类型" prop="type">
              <el-row :gutter="10" class="goods-type-row">
                <el-col span="12">
                  <el-input v-model="item.type" size="medium"></el-input>
                </el-col>
                <el-col v-if="index===goodsDetailTemp.goodsType.type.length-1" :span="2">
                  <el-button @click="addType()" size="medium" class="el-icon-plus" circle></el-button>
                </el-col>
                <el-col :span="2">
                  <el-button @click="removeType(index)" class="el-icon-delete" size="medium" circle></el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="图片" prop="image">
              <img :src="item.image" width="300px">
              <el-upload
                class="upload-logo"
                :headers="headers"
                :before-upload="beforeImageUpload"
                :on-progress="uploadTypeLoading"
                :action="'/goods/info/uploadGoodsImage?fileName=' + goodsDetailTemp.goodsName + '-type-' + item.type"
                :on-success="((file,fileList)=>{return handleTypeImageSuccess(file,fileList,index)})"
                :show-file-list="false"
                >
                <el-button size="small" type="primary">点击上传图片</el-button>
                <div slot="tip" class="el-upload__tip">只能上传一张jpg/png/jpeg图片, 图片大小不超过2M</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="价格" prop="price">
              <el-row :gutter="10" class="goods-type-row">
                <el-col span="4">
                  <el-input @input.native="priceInput($event,item.price)" v-model="item.price" size="medium"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="邮费" prop="fare">
              <el-row :gutter="10" class="goods-type-row">
                <el-col span="4">
                  <el-input @input.native="priceInput($event,item.fare)" v-model="item.fare"  size="medium"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-divider></el-divider>
          </div>
        </el-form>
      </el-scrollbar>
      <div slot="footer" style="text-align: center;" class="dialog-footer">
        <el-button @click="typeClose">取 消</el-button>
        <el-button type="primary" @click="updateType">确 定</el-button>
      </div>   
    </el-dialog>
    <el-dialog title="修改商品颜色信息" 
      :before-close="colorClose" 
      :visible.sync="colorDialogVisible" 
      v-loading="dialogLoading"
      element-loading-text="努力上传中，请稍等">
      <el-scrollbar class="goods-type-scrollbar">
        <el-form
            ref="color"
            :model="goodsDetailTemp.goodsType.color"
            label-width="100px"
            class="goodsType-form"
        >
          <div v-for="(item, index) in goodsDetailTemp.goodsType.color" :key="index">
            <el-form-item label="颜色" prop="color">
              <el-row :gutter="10" class="goods-type-row">
                <el-col span="12">
                  <el-input v-model="item.color" size="medium" maxlength="20" show-word-limit></el-input>
                </el-col>
                <el-col v-if="index===goodsDetailTemp.goodsType.color.length-1" :span="2">
                  <el-button @click="addColor()" size="medium" class="el-icon-plus" circle></el-button>
                </el-col>
                <el-col :span="2">
                  <el-button @click="removeColor(index)" class="el-icon-delete" size="medium" circle></el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="图片" prop="image">
              <img :src="item.image" width="300px">
              <el-upload
                class="avatar-uploader"
                :headers="headers"
                :before-upload="beforeImageUpload"
                :on-progress="uploadTypeLoading"
                :action="'/goods/info/uploadGoodsImage?fileName=' + goodsDetailTemp.goodsName + '-color-' + item.color"
                :on-success="((file,fileList)=>{return handleColorImageSuccess(file,fileList,index)})"
                :show-file-list="false"
                >
                <el-button size="small" type="primary">点击上传图片</el-button>
                <div slot="tip" class="el-upload__tip">只能上传一张jpg/png/jpeg图片，图片大小不超过2M</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="价格" prop="price">
              <el-row :gutter="10" class="goods-type-row">
                <el-col span="4">
                  <el-input @input.native="priceInput($event,item.price)" v-model="item.price" size="medium"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="邮费" prop="fare">
              <el-row :gutter="10" class="goods-type-row">
                <el-col span="4">
                  <el-input @input.native="priceInput($event,item.fare)" v-model="item.fare"  size="medium"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-divider></el-divider>
          </div>
        </el-form>
      </el-scrollbar>
      <div slot="footer" style="text-align: center;" class="dialog-footer">
        <el-button @click="colorClose">取 消</el-button>
        <el-button type="primary" @click="updateColor">确 定</el-button>
      </div>   
    </el-dialog>
  </div>
</template>

<script>
  import { getGoodsDetail, updateGoodsInfo } from '@/api/goodsList'
  import { getToken } from '@/api/user'

  export default {
    name: 'Form',
    data() {
      return {
        headers: {
          'x-auth0-token': getToken()
        },
        fileList:[],
        id: '',
        options: [{
          value: 'free',
          label: '免费'
        }, {
          value: 'add',
          label: '加一件叠加一次邮费'
        }, {
          value: 'noadd',
          label: '添加件数不叠加'
        }],
        goodsDetail: {
          goodsLogo: '',
          goodsName: '',
          goodsPrice: 0.00,
          postageType: 'add',
          isSell: 0,
          goodsType: {
            type: [],
            color: [],
            size: []
          },
          goodsContent: [],
          pics: []
        },
        goodsDetailTemp: {
          goodsLogo: '',
          goodsName: '',
          goodsPrice: 0.00,
          postageType: 'add',
          isSell: 0,
          goodsType: {
            type: [],
            color: [],
            size: []
          },
          goodsContent: [],
          pics: []
        },
        color: [{
          color:'',
          fare: '',
          image: '',
          price: 0
        }],
        fileName: '',
        typeDialogVisible: false,
        colorDialogVisible: false,
        contentDialogVisible: false,
        picsDialogVisible: false,
        listLoading: true,
        dialogLoading: false,
        rules: {
          goodsLogo: [{required: true, message: '至少选择一张商品Logo！', trigger: 'blur'}],
          goodsName: [
            { required: true, message: '请输入商品名称', trigger: 'blur' },
            {
              min: 3,
              max: 100,
              message: '长度在 3 到 100 个字符',
              trigger: 'blur',
            },
          ],
          goodsPrice: [
            { required: true, message: '请输入商品价格，小数点不能超过2位', trigger: 'change' },
          ]
        },
      }
    },
    created() {
      this.fetchData(this.$route.query.id)
    },
    methods: {
      changeSell($event) {
        this.goodsDetail.isSell = $event
      },
      uploadTypeLoading(event, file, fileList) {
        this.dialogLoading = true
      },
      uploadImageLoading(event, file, fileList) {
        this.listLoading = true
      },
      beforeImageUpload(file) {
        const isImage = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isImage) {
          this.$message.error('图片只能是 JPG 或 PNG 格式!');
        }
        this.fileName = file.name
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isImage && isLt2M;
      },
      handleLogoSuccess(res, file, fileList){
        this.goodsDetail.goodsLogo = res.data
        this.listLoading = false
      },
      handleContentSuccess (res, file, index) {
        this.goodsDetailTemp.goodsContent[index] = res.data
        this.dialogLoading = false
      },
      handlePicsSuccess (res, file, index) {
        this.goodsDetailTemp.pics[index].picId = index + 1
        this.goodsDetailTemp.pics[index].picSrc = res.data
        this.dialogLoading = false
      },
      handleNewPicsSuccess (res, file, index) {
        this.goodsDetailTemp.pics.push({
          picsId: index + 1,
          picSrc: res.data
        })
        this.dialogLoading = false
      },
      handleTypeImageSuccess (res, file, index) {
        this.goodsDetailTemp.goodsType.type[index].image = res.data
        this.dialogLoading = false
      },
      handleColorImageSuccess (res, file, index) {
        this.goodsDetailTemp.goodsType.color[index].image = res.data
        this.dialogLoading = false
      },
      priceInput(e,price) {
        e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
        this.input=e.target.value
        price=this.input
      },
      swapArray (arr, index1, index2) {
        arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      },
      upItem(index,item) {
        this.swapArray(item, index, index - 1)
      },
      downItem(index,item) {
        this.swapArray(item, index, index + 1)
      },
      removeContent(index) {
        this.$confirm('您确定要删除该商品详情图片吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.goodsDetailTemp.goodsContent.splice(index,1)
        })
      },
      removePics(index) {
        this.$confirm('您确定要删除该商品轮播图片吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.goodsDetailTemp.pics.splice(index,1)
        })
      },
      addType() {
        if (this.goodsDetailTemp.goodsType.type.length + 1 > 30) {
          this.$message.error('类型不能超过30种！');
        } else {
          this.goodsDetailTemp.goodsType.type.push({
              fare: '',
              image: '',
              type: '',
              price: 0
          })
        }
      },
      removeType(index) {
        this.$confirm('您确定要删除该商品类型吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.goodsDetailTemp.goodsType.type.splice(index,1)
        })
      },
      addColor() {
        if (this.goodsDetailTemp.goodsType.color.length + 1 > 20) {
          this.$message.error('颜色不能超过20种！');
        } else {
          this.goodsDetailTemp.goodsType.color.push({
            fare: '',
            image: '',
            color: '',
            price: 0
          })
        }
      },
      removeColor(index) {
        this.$confirm('您确定要删除该商品颜色吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.goodsDetailTemp.goodsType.color.splice(index,1)
        })
      },
      addSize() {
        if (this.goodsDetail.goodsType.size.length + 1 > 20) {
          this.$message.error('尺寸不能超过20种！');
        } else {
          this.goodsDetail.goodsType.size.push('')
        }
      },
      removeSize(index) {
        this.$confirm('您确定要删除该商品尺寸吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.goodsDetail.goodsType.size.splice(index,1)
        })
      },
      updateContent(done) {
        this.$confirm('确认提交修改？')
          .then(_ => {
            this.goodsDetail = JSON.parse(JSON.stringify(this.goodsDetailTemp))
            this.contentDialogVisible = false
            done()
          }).catch(_ => {});
      },
      updatePics(done) {
        this.$confirm('确认提交修改？')
          .then(_ => {
            this.goodsDetail = JSON.parse(JSON.stringify(this.goodsDetailTemp))
            this.picsDialogVisible = false
            done()
          }).catch(_ => {});
      },
      updateType(done) {
        this.$confirm('确认提交修改？')
          .then(_ => {
            this.goodsDetail = JSON.parse(JSON.stringify(this.goodsDetailTemp))
            this.typeDialogVisible = false
            done()
          }).catch(_ => {});
      },
      updateColor(done) {
        this.$confirm('确认提交修改？')
          .then(_ => {
            this.goodsDetail = JSON.parse(JSON.stringify(this.goodsDetailTemp))
            this.colorDialogVisible = false
            done()
          }).catch(_ => {});
      },
      picsClose(done) {
        this.$confirm('确认取消修改？')
          .then(_ => {
            this.goodsDetailTemp = JSON.parse(JSON.stringify(this.goodsDetail))
            this.picsDialogVisible = false
            done()
          }).catch(_ => {});
      },
      contentClose(done) {
        this.$confirm('确认取消修改？')
          .then(_ => {
            this.goodsDetailTemp = JSON.parse(JSON.stringify(this.goodsDetail))
            this.contentDialogVisible = false
            done()
          }).catch(_ => {});
      },
      typeClose(done) {
        this.$confirm('确认取消修改？')
          .then(_ => {
            this.goodsDetailTemp = JSON.parse(JSON.stringify(this.goodsDetail))
            this.typeDialogVisible = false
            done()
          }).catch(_ => {});
      },
      colorClose(done) {
        this.$confirm('确认取消修改？')
          .then(_ => {
            this.goodsDetailTemp = JSON.parse(JSON.stringify(this.goodsDetail))
            this.colorDialogVisible = false
            done()
          }).catch(_ => {});
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm('您确定要提交商品更新信息吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.updateGoods(this.goodsDetail)
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消更新'
              });          
            });
          } else {
            return false
          }
        })
      },
      async updateGoods(goodsDetail){
        this.$notify.info({
          title: 'Running',
          message: '商品更新中，请稍等一会'
        });
        // 记录：不知为何，传数字0一直传不过去，属性会直接丢失，不得已将isSell属性转为字符传给后端Integer接收
        const goods = JSON.parse(JSON.stringify(goodsDetail))
        goods.isSell = goods.isSell + ''
        const {code} = await updateGoodsInfo(goods)
        if (code===1000) {
            this.$notify({
            title: 'Update Successs',
            message: '更新商品信息成功',
            type: 'success'
          });
        } else {
            this.$notify.error({
            title: 'Update Fail',
            message: '更新商品信息失败，请检查数据是否合法或者网络是否正常'
          });
        }
      },
      async fetchData(id) {
        const{ data } = await getGoodsDetail(id)
        this.goodsDetail = JSON.parse(JSON.stringify(data))
        this.goodsDetailTemp = JSON.parse(JSON.stringify(data))
        this.listLoading = false
      }
    },
  }
</script>
<style lang="scss" scoped>
  @import url("//unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css");
  .goods-detail-container {
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }

      .goods-type-scrollbar {
        height: 600px;

        .goods-type-table {
          height: 100%;
        }
      }

    .goodsDetail-row {
      display: flex;
      // justify-content: center;
      // align-items: center;

      .goods-detail-image {
        width: 100%;
        height: 400px;
        transition: all ease-in-out 0.3s;
      }

      .goods-type {
        width: 200%;

        .goods-type-tabs {
          margin-top: 10px;

          .goods-type-image {
            width: 100%;
            display: block;
          }
        }
      }

      .goods-content {
        margin-left: 14px;
        margin-top: 25px;

        .goods-content-box {
          margin-top: 6px;
          width:500px;
          height:600px;

          .goods-content-scrollbar {
            height: 100%;
          }

          .goods-content-image {
            width: 100%;
          }
        }
      }

      .goods-pics {
        margin-top: 25px;
        margin-left: 14px;

        .goods-pics-carousel {
          width: 500px;

          .goods-pics-image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .input-item {
      position: relative;
      padding: 14px;
      text-align: center;
      white-space: nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      .icon-delete {
        position: absolute;
        right: 6px;
        top: 7px;
        color: #ccc;
        font-size: 20px;
        cursor: pointer;
        &:hover {
          color: #0095ff;
        }
      }
    }
  }
</style>